<template>
  <div>
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item label="资源名称" prop="resourceName">
        <el-input v-model.trim="formData.resourceName"></el-input>
      </el-form-item>
      <el-form-item label="标识编号" prop="resourceKey">
        <el-input v-model.trim="formData.resourceKey"></el-input>
      </el-form-item>

      <el-form-item label="接口标识" prop="interfaceKey">
        <el-input v-model.trim="formData.interfaceKey"></el-input>
      </el-form-item>

      <el-form-item label="资源类型" prop="resourceType">
        <el-select v-model="formData.resourceType">
          <el-option
            v-for="item in optionsType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row justify="end">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, reactive, ref, defineProps, toRef } from "vue";
import { postAddResSingle, postUpdateResSingle } from "/@/api/resource";
import NotifMessage from "/@/utils/message/notification";
import { cloneDeep } from "lodash-es";

const formRef = ref<HTMLFormElement | null>(null) as any;
const emit = defineEmits(["update:dialogVisible", "resetGetData"]);
const props = defineProps({
  resourceId: {
    type: Number
  },
  resourceKey: {
    type: String
  },
  childData: {
    type: Object
  },
  btnmode: {
    type: String
  }
});

const optionsType = [
  {
    value: "1",
    label: "URL"
  },
  {
    value: "2",
    label: "菜单"
  },
  {
    value: "3",
    label: "组件"
  },
  {
    value: "4",
    label: "接口"
  }
];

let formData = reactive({
  resourceName: "",
  resourceKey: "",
  interfaceKey: "",
  id: null,
  resourceType: "1"
});

const formRules = {
  resourceName: {
    required: true,
    message: "请输入资源名称",
    trigger: "change"
  },
  // resourceKey: {
  //   required: true,
  //   message: "请输入标识编号",
  //   trigger: "change"
  // },
  resourceType: {
    required: true,
    message: "请选择资源类型",
    trigger: "change"
  }
};

// 编辑
if (props.btnmode === "edit") {
  const childDataProp = toRef(props, "childData");
  const copyChildDataProp = cloneDeep(childDataProp.value);
  formData.resourceKey = copyChildDataProp.resourceKey;
  formData.resourceName = copyChildDataProp.resourceName;
  formData.id = copyChildDataProp.id;
  formData.resourceType = copyChildDataProp.resourceType;
  formData.interfaceKey = copyChildDataProp.interfaceKey;
}

const handleAdd = async () => {
  try {
    const isValid = await new Promise(resolve =>
      formRef.value.validate(resolve)
    );
    if (!isValid) return;

    delete formData.id;
    const params = Object.assign(formData, {
      resourceGroupId: props.resourceId,
      resourceValue: props.resourceKey
    });
    const { code } = await postAddResSingle(params);
    if (code === 200) {
      NotifMessage.success("添加成功");
      handleRefresh();
    }
  } catch (err) {
    console.log(err);
  }
};

const handleEdit = async () => {
  try {
    const isValid = await new Promise(resolve =>
      formRef.value.validate(resolve)
    );
    if (!isValid) return;

    const { code } = await postUpdateResSingle(formData);
    if (code === 200) {
      NotifMessage.success("修改成功");
      handleRefresh();
    }
  } catch (err) {
    console.log(err);
  }
};

const handleCancel = () => {
  emit("update:dialogVisible", false);
};

const handleSubmit = () => {
  if (props.btnmode === "add") {
    handleAdd();
  } else {
    handleEdit();
  }
};

const handleRefresh = () => {
  emit("update:dialogVisible", false);
  emit("resetGetData");
};
</script>
